<template>
  <div class="no-public">
    <iframe :src="url" v-if="wxForm.stat === 'none'" class="iframe"></iframe>
    <template v-else>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="绑定公众号" name="first">
          <div class="public-div">
            <div class="public-left">
              <div class="head-img">
                <el-avatar shape="circle" style="background-color: #fff;" :size="40" fit="fill" :src="wxForm.authorInfo.headImg"></el-avatar>
              </div>
            </div>
            <div class="public-right">
              <div class="public-title">{{wxForm.authorInfo.nickName}}</div>
              <span class="public-label">{{wxForm.authorInfo.principalName}}</span>
            </div>
            <!-- <span class="public-btn" @click.stop="unbind">解除绑定</span> -->
          </div>
        </el-tab-pane>
        <el-tab-pane label="公众号消息模版" name="second">
          <el-table ref="table" style="width: 100%" :data="templList" row-key="id">
            <el-table-column v-for="(one) in tableHeader" :key="one.prop"  :label="one.label" >
              <template slot-scope="{ row }">
                <template v-if="one.prop !== 'tip'">{{row[one.prop]}}</template>
                <template v-else>{{ row.firstData.value}}</template>
              </template>
            </el-table-column>
            <el-table-column label="操作" >
              <template slot-scope="{ row }">
                <span @click.stop="handleEdit(row)" class="opera-span">编辑</span>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </template>
    <edit-templ ref="editTempl" @success="getTempl"></edit-templ>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Ref } from 'vue-property-decorator'
import { commonAction } from '@/utils/common'
import editTempl from './editTempl.vue'
import instiutionTable from '@/common/views/institutionTable/institutionTable.vue'
@Component({
  name: 'noPublic',
  components: {
    editTempl,
    instiutionTable
  }
})
export default class NoPublic extends Vue {
  [x: string]: any
  private url = ''
  private tableHeader: any[] = [
    { label: '模版类型', prop: 'typeName' },
    { label: '模版标题', prop: 'title' },
    { label: '提示文案', prop: 'tip' }
  ]

  private templList = []
  private wxForm: any = {
    authorInfo: {},
    authorizerAppid: '',
    stat: ''
  }

  private activeName = 'first'

  private handleEdit (row: any) {
    (this.$refs as any).editTempl.open(row)
  }

  private unbind () {
    this.$confirm('确定要解除绑定吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      commonAction({
        url: '/server-public/action/wx-open/unbind',
        method: 'post',
        data: { appId: this.wxForm.authorizerAppid }
      }).then(res => {
        if (res.success) {
          this.$message.success('解绑成功！')
          this.getWxAuthor()
        }
      })
    })
  }

  private async getWxAuthor () {
    commonAction({ url: '/server-public/action/wx-open/auth-info', method: 'get' }).then(res => {
      if (res.success) {
        this.wxForm.authorInfo = res.data?.authorInfo
        this.wxForm.authorizerAppid = res.data?.authorizerAppid
        this.wxForm.stat = res.data?.stat
        if (res.data.stat === 'none') {
          this.getCode()
        }
      }
    })
  }

  private getCode () {
    commonAction({ url: '/server-public/action/wx-open/login-page', method: 'get' }).then(res => {
      if (res.success) {
        console.log(res)
        this.url = res.data.login
      }
    })
  }

  private handleClick (tab) {
    if (tab.name === 'second') {
      this.getTempl()
    } else {
      this.getWxAuthor()
    }
  }

  private getTempl () {
    commonAction({ url: '/server-public/action/wx-open/messageTemplate', method: 'get' }).then(res => {
      if (res.success) {
        this.templList = res.data || []
      }
    })
  }

  private created () {
    this.getWxAuthor()
  }
}
</script>
<style lang="stylus" scoped>
.key-word {
  display: flex
}
.opera-span {
  color: #008cee;
  margin-right: 10px;
  cursor: pointer;
}
.public-btn
  background: #E5F3FD;
  border-radius: 4px;
  font-weight: 400;
  padding: 4px 8px;
  color: #008BEE;
  cursor: pointer;
  position: absolute
  padding: 10px 16px;
  right: 16px;
.head-img
  >>>img
    padding: 4px;
    box-sizing: border-box;
.public-left
  margin-right: 20px
.public-title
  font-size: 14px;
  font-weight: 600;
  color: #303753;
  margin-bottom: 12px
.public-label
  background: #F3F6F9;
  border-radius: 4px;
  font-weight: 400;
  color: #008BEE;
  padding: 3px 8px
.public-div
  position: relative
  background: #FFFFFF;
  border: 1px solid #ECF0F3;
  box-shadow: 0px 0px 4px 0px #E8EBEF;
  border-radius: 4px;
  display: flex
  padding: 16px
.no-public
  width 100%
  height 100%
.iframe
  width: 100%;
  height: 100%;
  border: none;
</style>
